<template>
	<span class="demonstration">请选择一个时间</span>
	<el-date-picker v-model="dateValue" type="date" placeholder="请选择一个日期" @change="change" :shortcuts="shortcuts"
		:size="large" value-format="YYYY-MM-DD" />


	<el-table :data="tableData" border stripe show-overflow-tooltip highlight-current-row style="width: 100%"
		:row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }"
		:default-sort="{ prop: 'ADD_MARKET_CAP', order: 'descending' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column prop="SECURITY_CODE" label="code" sortable fixed></el-table-column>
		<el-table-column prop="BOARD_NAME" label="名称" sortable fixed width="130PX"></el-table-column>
		<el-table-column prop="INDEX_CHANGE_RATIO" label="涨跌幅" sortable fixed></el-table-column>


		<el-table-column label="北向资金今日持股" header-align="center">
			<!--  Number.js-->
			<el-table-column prop="HK_VALUE" label="市值" sortable
				:formatter="(row, column) => changeMoney(row[column.property])"
				:sort-method="(a, b) => sort(a.HK_VALUE, b.HK_VALUE)" />
			<!-- <el-table-column prop="HK_BOARD_RATIO" label="占板块比" :formatter="row => changeRatio(row.HK_BOARD_RATIO)" /> -->
			<!-- <el-table-column prop="BOARD_HK_RATIO" label="占北向资金比" :formatter="row => changeRatio(row.BOARD_HK_RATIO)" /> -->
		</el-table-column>

		<el-table-column label="北向资金今日增持估计" header-align="center">
			<el-table-column prop="ADD_MARKET_CAP" label="市值" sortable
				:formatter="(row, column) => changeMoney(row[column.property])"
				:sort-method="(a, b) => sort(a.ADD_MARKET_CAP, b.ADD_MARKET_CAP)" />
			<!-- <el-table-column prop="ADD_RATIO" label="市值增幅" :formatter="row => changeRatio(row.ADD_RATIO / 100)" /> -->
			<!-- <el-table-column prop="ADD_BOARD_RATIO" label="占板块比" :formatter="row => changeRatio(row.ADD_BOARD_RATIO)" /> -->
			<!-- <el-table-column prop="ADD_HK_RATIO" label="占北向资金比" :formatter="row => changeRatio(row.ADD_HK_RATIO)" /> -->
		</el-table-column>

		<el-table-column label="今日增持最大股" header-align="center">
			<!-- <el-table-column prop="MAXADD_SECURITY_CODE" label="code"/> -->
			<el-table-column prop="MAXADD_SECURITY_NAME" label="市值">
				<template #default="scope">
					<span> {{ scope.row.MAXADD_SECURITY_CODE }} / {{ scope.row.MAXADD_SECURITY_NAME }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="MAXADD_RATIO_SECURITY_CODE" label="code" /> -->
			<el-table-column prop="MAXADD_RATIO_SECURITY_NAME" label="占总市值比">
				<template #default="scope">
					<span> {{ scope.row.MAXADD_RATIO_SECURITY_CODE }} / {{ scope.row.MAXADD_RATIO_SECURITY_NAME }}</span>
				</template>

			</el-table-column>
		</el-table-column>

		<el-table-column label="今日减持最大股" header-align="center">
			<!-- <el-table-column prop="MINADD_SECURITY_CODE" label="code" /> -->
			<el-table-column prop="MINADD_SECURITY_NAME" label="市值" />
			<!-- <el-table-column prop="MINADD_RATIO_SECURITY_CODE" label="code" /> -->
			<el-table-column prop="MINADD_RATIO_SECURITY_NAME" label="占总市值比" />
		</el-table-column>

	</el-table>
</template>

<script >

export default {
	// 北向资金增持概念板块排行
	//https://data.eastmoney.com/hsgtcg/bk.html
	data() {
		return {
			dateValue: "",
			tableData: [],
			shortcuts: [
				{
					text: '今天',
					value: new Date(),
				},
				{
					text: '昨天',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24)
						return date
					},
				},
				{
					text: '一周前',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
						return date
					},
				},
			]
		}
	},
	mounted() {
		this.data('2023-12-28').then(data => this.tableData = data.result.data);
	},
	methods: {
		change(value) {
			this.data(value).then(data => this.tableData = data.result.data);
		},
		filterTag(value, row) {
			return row.TRADEMARKET === value;
		},
		sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			return parseFloat(r1) - parseFloat(r2);
		},
		data(dateValue) {
			if (dateValue == undefined) {
				dateValue = dayjs().format('YYYY-MM-DD')
			}

			//console.log(" data ", dateValue);
			const options = {
				method: 'GET',
				url: 'https://datacenter-web.eastmoney.com/api/data/v1/get',
				params: {
					sortColumns: 'ADD_MARKET_CAP',
					sortTypes: '-1',
					pageSize: '86',
					pageNumber: '1',
					reportName: 'RPT_MUTUAL_BOARD_HOLDRANK_WEB',
					columns: 'ALL',
					quoteColumns: 'f3~05~SECURITY_CODE~INDEX_CHANGE_RATIO',
					quoteType: '0',
					source: 'WEB',
					client: 'WEB',
					filter: '(BOARD_TYPE="5")(INTERVAL_TYPE="1")(TRADE_DATE=\'' + dateValue + '\')'
				}
			};

			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});


		},
		changeRatio(num) {
			return Number(num * 100).toFixed(2) + "%";
		},
		changeMoney(num) {
			// 使用JS方法
			return changeMoney(num);
		}

	}
}

</script>